<template>
  <div class="goods-container">
    <searchForm @search="handleSearch" @reset="handleReset" />
    <div class="table-operations">
      <a-button @click="handleAdd()">新增奖品</a-button>
    </div>
    <tableData
      :tableList="tableList"
      :loading="loading"
      :pagination="pagination"
      @changePagination="changePagination"
      @refresh="getLis"
      @openEdit="handleAdd"
      @handleDelete="handleDelete"
    />
  </div>
  <editModal ref="editModalRef" @update="handleUpdate" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import editModal from './components/goodsView/editModal.vue'
import tableData, { type DrawItem } from './components/goodsView/tableData.vue'
import searchForm from './components/goodsView/searchForm.vue'
import { listDraws, createDraw, updateDraw, deleteDraw } from '@/api/draw.api'

interface SearchForm {
  name: string
  subTitle: string
}

const loading = ref(false)
const tableList = ref<DrawItem[]>([])
const editModalRef = ref()
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
})

const getLis = async (searchValues?: SearchForm) => {
  loading.value = true
  try {
    const params = {
      page: pagination.value.current,
      size: pagination.value.pageSize,
      name: searchValues?.name,
      subTitle: searchValues?.subTitle,
    }
    const res = await listDraws(params)
    if (res.code === 200 && res.data) {
      pagination.value.total = res.data.total
      tableList.value = res.data.list as DrawItem[]
    } else {
      message.error(res.message || '获取列表失败')
    }
  } catch (err: unknown) {
    console.error(err)
    message.error('获取列表失败')
  } finally {
    loading.value = false
  }
}
// 处理更新/新增
const handleUpdate = async (record: DrawItem) => {
  try {
    const dto = {
      name: record.name,
      subTitle: record.subTitle,
      pic: record.pic,
      price: Math.round(record.price * 100),
    }
    const res = record._id ? await updateDraw(record._id, dto) : await createDraw(dto)
    if (res.code === 200) {
      message.success(record._id ? '编辑成功' : '新增成功')
      getLis()
    } else {
      message.error(res.message || '操作失败')
    }
  } catch (err: unknown) {
    console.error(err)
    message.error('操作失败')
  }
}

const handleSearch = (values: SearchForm) => {
  pagination.value.current = 1
  getLis(values)
}

const handleReset = () => {
  pagination.value.current = 1
  getLis()
}

const handleAdd = (record?: DrawItem) => {
  if (record) {
    editModalRef.value.open({
      ...record,
      price: record.price / 100,
    })
  } else {
    // 处理新增逻辑
    editModalRef.value.open(record)
  }
}

const changePagination = (paginations: { current: number; pageSize: number }) => {
  console.log(paginations)
  pagination.value.current = paginations.current
  pagination.value.pageSize = paginations.pageSize
  getLis()
}

const handleDelete = async (record: DrawItem) => {
  if (!record._id) return
  try {
    const res = await deleteDraw(record._id)
    if (res.code === 200) {
      message.success('删除成功')
      getLis()
    } else {
      message.error(res.message || '删除失败')
    }
  } catch (err: unknown) {
    console.error(err)
    message.error('删除失败')
  }
}
onMounted(() => {
  getLis()
})
</script>

<style lang="stylus" scoped>

.goods-container {
  padding: 24px;
}

.table-operations {
  margin-bottom: 16px;
  padding 10px

}
</style>
